<template>
  <div id="index">
    <div class="app-container"
      id="container">

      <el-form ref="form"
        :model="form"
        :rules="rules"
        label-width="140px"
        label-position="right">
        <div class="product-div">
          <div class="product-header">
            <em style="font-size: 18px;font-style: normal;"
              class="big_title_style">基本信息</em>
          </div>

          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="套餐卡名称"
                prop="cardName">
                <el-input v-model="form.cardName"
                  placeholder="请输入套餐卡名称"
                  clearable
                  maxlength="50"
                  show-word-limit />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="服务套餐卡分类"
                prop="categoryUids"
                style="width: 100%;">
                <el-cascader :props="{ checkStrictly: true }"
                  style="width: 100%;"
                  v-model="form.categoryUids"
                  :options="categoryOptions"
                  clearable
                  filterable>
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-appendHide">元</div>
            </el-col>
            <el-col :span="7">
              <el-form-item label="服务套餐卡类别"
                prop="cardType"
                style="width: 100%;">
                <el-select style="width: 100%;"
                  v-model="form.cardType"
                  placeholder="请选择服务套餐卡类别"
                  size="small"
                  @change="cardTypeChange">
                  <el-option v-for="dict in cardTypeOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-appendHide">元</div>
            </el-col>

            <!-- <el-col :span="7">
              <el-form-item label="服务耗时" prop="cardServiceDuration">
                <el-input style="width:100%;" v-model="form.cardServiceDuration"
                  @input="form.cardServiceDuration = form.cardServiceDuration.replace(/^(0+)|[^\d]+/g, '')"
                  placeholder="" clearable maxlength="3" show-word-limit>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-append">分钟</div>
            </el-col> -->
          </el-row>

          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="面价"
                :required="true">
                <el-input-number style="width:100%;"
                  :precision="2"
                  :controls="false"
                  :step="0.1"
                  :min="0"
                  :max="9999999"
                  v-model="form.cardPriceStr">
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-append">元</div>
            </el-col>

            <el-col :span="7">
              <el-form-item label="活动价格"
                prop="itemFavorablePrice">
                <el-input-number style="width:100%;"
                  :precision="2"
                  :controls="false"
                  :step="0.1"
                  :min="0"
                  :max="9999999"
                  v-model="form.cardFavorablePriceStr"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-append">元</div>
            </el-col>

            <el-col :span="7">
              <el-form-item label="限制使用次数"
                prop="limitUseTimes">
                <el-input-number style="width:100%;"
                  :controls="false"
                  :precision="0"
                  :step="0"
                  :min="0"
                  :max="9999"
                  v-model="form.limitUseTimes"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-appendHide">天</div>
            </el-col>

            <el-col :span="7"
              v-if="(0 > 1)">
              <el-form-item label="结算价"
                :required="true">
                <el-input-number style="width:100%;"
                  :precision="2"
                  :controls="false"
                  :step="0.1"
                  :min="0.01"
                  :max="9999999"
                  v-model="form.cardSettlementPriceStr"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-appendHide">元</div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="菠萝派"
                prop="cardBoluoHuaPrice">
                <el-input-number style="width:100%;"
                  :controls="false"
                  :precision="0"
                  :step="0"
                  :min="0"
                  :max="9999999"
                  v-model="form.cardBoluoHuaPriceStr"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-append">个</div>
            </el-col>

            <el-col :span="7">
              <el-form-item label="门店销售分成"
                :required="true">
                <el-input-number style="width:100%;"
                  :controls="false"
                  :precision="0"
                  :step="0"
                  :min="0"
                  :max="100"
                  v-model="form.cardSalePercent"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-append">%</div>
            </el-col>

            <el-col :span="7">
              <el-form-item label="门店服务分成"
                :required="true">
                <el-input-number style="width:100%;"
                  :controls="false"
                  :precision="0"
                  :step="0"
                  :min="0"
                  :max="100"
                  v-model="form.cardServicePercent"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-append">%</div>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="过期类型">
                <el-radio-group v-model="form.expireDayRadio">
                  <el-radio :label="-1">长期有效</el-radio>
                  <el-radio :label="0">有效时间</el-radio>
                  <el-radio :label="2">指定时间</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24"
            v-if="form.expireDayRadio == 0">
            <el-col :span="7">
              <el-form-item label="有效时间"
                prop="expireDay">
                <el-input-number style="width:100%;"
                  :controls="false"
                  :precision="0"
                  :step="0"
                  :min="0"
                  :max="9999999"
                  v-model="form.expireDay"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-append">天</div>
            </el-col>
          </el-row>

          <el-row :gutter="24"
            v-if="form.expireDayRadio == 2">
            <el-col :span="7">
              <el-form-item label="指定时间"
                prop="expireDate">
                <el-date-picker value-format="yyyy-MM-dd"
                  v-model="form.expireDate"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="适用门店">
                <el-checkbox-group v-model="form.serviceTypes"
                  @change="choiceServiceCheckbox">
                  <el-checkbox :disabled='disabledType(item.dictValue)'
                    :key="index"
                    v-for="(item, index) in serviceTypesList"
                    :label="item.dictValue">
                    {{ item.dictLabel }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="选择">
                <el-checkbox-group v-model="form.checkList">
                  <el-checkbox label="isCommon"
                    @change="choiceCheckboxStroe">指定门店</el-checkbox>
                  <el-checkbox label="isSubgift">支持转赠</el-checkbox>
                  <el-checkbox label="isShow">前端展示</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="门店列表"
            v-if="existValue('isCommon') > 0"
            prop="isCommon">
            <el-button class="button-new-tag"
              size="small"
              type="primary"
              @click="selectCommodity">选择门店</el-button>
            <selected ref="childStore"
              style="margin-top: 10px;"
              v-if="selectedDataStore.length > 0"
              :selectedData="selectedDataStore">
            </selected>
          </el-form-item>

          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="支付方式">
                <el-checkbox-group v-model="form.checkListPay">
                  <el-checkbox label="isUseBoluoGoldCoin">菠萝金币</el-checkbox>
                  <el-checkbox label="isUseBoluoSilverCoin">菠萝银币</el-checkbox>
                  <el-checkbox label="isUseCoupon">优惠券</el-checkbox>
                  <el-checkbox label="isUseMemberDiscount"
                    @change="choiceCheckboxMember">会员折扣</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="折扣等级"
                v-if="existValuePay('isUseMemberDiscount') > 0"
                prop="isUseMemberDiscount">
                <el-select style="width: 100%;"
                  v-model="form.memberLevel"
                  placeholder="请选择等级"
                  clearable
                  size="small">
                  <el-option v-for="dict in levelOptions"
                    :key="dict.customerGrade"
                    :label="dict.levelName"
                    :value="dict.customerGrade" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="22">
              <el-form-item label="营销标签"
                prop="itemTags"
                style="width: 100%;">
                <el-tag style="margin: 5px;"
                  :key="tag"
                  v-for="tag in form.itemTagsArrayYx"
                  closable
                  :disable-transitions="false"
                  @close="handleCloseYx(tag)">
                  {{ tag }}
                </el-tag>
                <el-input style="width: 200px;"
                  class="input-new-tag"
                  v-if="inputVisibleYx"
                  v-model="inputValueYx"
                  ref="saveTagInputYx"
                  size="small"
                  @keyup.enter.native="handleInputConfirmYx"
                  @blur="handleInputConfirmYx">
                </el-input>
                <el-button v-if="2>this.form.itemTagsArrayYx.length"
                  class="button-new-tag"
                  size="small"
                  @click="showInputYx">+新增标签
                </el-button>

              </el-form-item>
            </el-col>

          </el-row>

          <el-row :gutter="20">
            <el-col :span="22">
              <el-form-item label="标签集合"
                prop="cardTags"
                style="width: 100%;">
                <el-tag style="margin: 5px;"
                  :key="tag"
                  v-for="tag in form.cardTagsArray"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)">
                  {{ tag }}
                </el-tag>
                <el-input style="width: 200px;"
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm">
                </el-input>
                <el-button v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput">+新增标签
                </el-button>

              </el-form-item>
            </el-col>

          </el-row>

          <el-form-item label="套餐卡主图"
            prop="cardMainImage">
            <imageArraySize :imageStr.sync="form.cardMainImage"
              :key="form.cardMainImage"
              ref="childsss"
              :msg="'图片要求：宽高750*750，大小2M内。'"
              :limit="1"
              :size="2 * 1024 * 1024"></imageArraySize>
          </el-form-item>

          <el-form-item label="套餐卡背景图"
            prop="backgroundImage">
            <imageArraySize :imageStr.sync="form.backgroundImage"
              :key="form.backgroundImage"
              ref="childsssBackgroundImage"
              :msg="'图片要求：宽高670*180，大小2M内。'"
              :limit="1"
              :size="2 * 1024 * 1024"></imageArraySize>
          </el-form-item>

          <el-form-item label="套餐卡轮播图"
            prop="cardBanner">
            <imageArraySize v-if="isLoad"
              :imageStr.sync="form.cardBanner"
              key="form.cardBanner"
              ref="child"
              :msg="'图片要求：宽高750*484，大小2M内。'"
              :limit="20"
              :size="2 * 1024 * 1024"></imageArraySize>
          </el-form-item>

          <div class="div-text"
            v-if="displayBool == 0"
            @click="divShow(1)">添加更多 图片、文案
            <i class="el-icon-arrow-down"></i>
          </div>

          <div :class="displayBool == 0 ? 'div-img' : ''">

            <el-row :gutter="24">
              <el-col :span="22">
                <el-form-item label="套餐卡文字描述"
                  prop="cardDescText">
                  <el-input type="textarea"
                    :rows="2"
                    v-model="form.cardDescText"
                    placeholder="请输入套餐卡文字描述"
                    clearable
                    maxlength="200"
                    show-word-limit />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="套餐卡图片"
              prop="cardDescImage">
              <imageArraySize :imageStr.sync="form.cardDescImage"
                :key="form.cardDescImage"
                ref="childss"
                :msg="'图片要求：高度自适应，大小2M内。'"
                :limit="20"
                :size="2 * 1024 * 1024"></imageArraySize>
            </el-form-item>

            <el-row :gutter="24">
              <el-col :span="22">
                <el-form-item label="特别提示"
                  prop="cardTips">
                  <el-input type="textarea"
                    :rows="2"
                    v-model="form.cardTips"
                    placeholder="请输入特别提示"
                    clearable
                    maxlength="200"
                    show-word-limit />
                </el-form-item>
              </el-col>
            </el-row>

          </div>
          <div class="div-text"
            v-if="displayBool == 1"
            @click="divShow(0)">收起
            <i class="el-icon-arrow-up"></i>
          </div>
        </div>

        <div class="product-div-two">
          <div class="product-header">
            <em style="font-size: 18px;font-style: normal;"
              class="big_title_style">服务项目</em>
          </div>
          <div style="width: 1200px;padding: 10px 10px 20px 100px;">
            <el-button type="primary"
              @click="selectCommodityDevice">选择服务项目</el-button>
            <selectedItemUpdate ref="childDevice"
              style="margin-top: 10px;"
              v-if="selectedDataDevice.length > 0"
              :selectedData="selectedDataDevice">
            </selectedItemUpdate>
          </div>

        </div>

      </el-form>
      <div class="dw">
        <el-button @click="colsePro"
          style="margin-top: 10px;margin-left: 40%;">返回</el-button>
        <el-button type="primary"
          @click="submitForm(0)"
          style="margin-top: 10px;">保存</el-button>
        <el-button type="primary"
          @click="submitForm(1)"
          style="margin-top: 10px;">一键上架</el-button>
      </div>
    </div>

    <commodityStore v-if="storeOpen"
      @toCloseBox="toCloseBox"
      @multipleSelection="multipleSelection"
      :flag="storeOpen"
      :source="false"
      ref="selTable"
      :serviceTypes="form.serviceTypes"></commodityStore>

    <commodityItem v-if="deviceOpen"
      @toCloseBox="toCloseDeviceBox"
      @multipleSelection="multipleSelectionDevice"
      :flag="deviceOpen"
      :itemTypeStr="form.cardType"
      :cardUid="cardUid"
      :source="false"
      :isShowSelect="false"
      ref="selTableDevice">
    </commodityItem>

  </div>
</template>

<script>
import {
  checkPermi,
  checkRole
}
  from "@/utils/permission"; // 权限判断函数
import {
  selectOptions
}
  from "@/api/service/serviceCategory";

import imageArraySize from "@/components/ImageUpload/imageArraySize";
import videoUpload from "@/components/ImageUpload/videoUpload";
import sku from "@/components/sku/index"
import {
  getCard, addCard, editCard
}
  from '@/api/service/card'

import selected from "@/components/Activity/SelectedStore";
import commodityStore from "@/components/Activity/commodityStore";


import selectedItemUpdate from "@/components/Activity/SelectedItemUpdate";
import commodityItem from "@/components/Activity/commodityItem";

import { getPayLevel } from "@/api/customer/level"


export default {
  components: {
    imageArraySize,
    videoUpload,
    sku, selected,
    commodityStore, commodityItem, selectedItemUpdate
  },
  data () {

    return {
      skuCom: true,
      levelOptions: [],
      itemTypeStr: [],
      cardUid: this.$route.params.cardId,
      storeOpen: false,
      selectedDataStore: [],
      deviceOpen: false,
      selectedDataDevice: [],
      indexs: 0,
      inputVisible: false,
      inputValue: '',
      inputVisibleYx: false,
      inputValueYx: null,
      roles: 0,
      roleRule: 0,
      // th 值；动态控制 th 标题、批量设置
      //规格名称和的值, 组件里面可以添加规格名称和值
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 商品类别
      categoryOptions: [],
      cardTypeOptions: [],

      // 更多的下拉
      displayBool: 0,
      // 查询参数
      queryParams: {},
      columns: [],
      // 表单参数
      form: {
        itemTagsArrayYx: [],

        isCommon: '1',
        isLockDevice: '0',
        isUseBoluoGoldCoin: '0',
        isUseBoluoSilverCoin: '0',
        isUseCoupon: '0',
        isRecommend: '0',
        cardTagsArray: [],
        proboxServiceItemSkus: [],
        cardPriceStr: '0',
        cardFavorablePriceStr: '0',
        cardSettlementPriceStr: '0',
        cardBoluoHuaPriceStr: '0',
        checkList: [],
        isSubgift: '0',
        checkListPay: [],
        cardMainImage: '',
        cardBanner: '',
        serviceTypes: [],
        expireDayRadio: 0,
        isShow: '1',
      },
      property: [],
      propertyUid: [],
      // 表单校验
      rules: {
        limitUseTimes: [
          {
            required: true,
            message: "限制使用次数不能为空",
            trigger: "blur"
          }
        ],
        cardBanner: [
          {
            required: true,
          }
        ],
        cardMainImage: [
          {
            required: true,
          }
        ],
        isUseMemberDiscount: [
          {
            required: true,
            message: "折扣等级不能为空",
          }
        ],
        isCommon: [
          {
            required: true,
          }
        ],
        cardName: [{
          required: true,
          message: "套餐卡名称不能为空",
          trigger: "blur"
        }],
        categoryUids: [{
          required: true,
          message: "套餐卡分类不能为空",
          trigger: "blur"
        }],
        cardType: [{
          required: true,
          message: "套餐卡类别不能为空",
          trigger: "blur"
        }],
        cardServiceDuration: [{
          required: true,
          message: "单服务耗时不能为空",
          trigger: "blur"
        }],
        cardComposeDuration: [{
          required: true,
          message: "组合服务耗时不能为空",
          trigger: "blur"
        }],
      },
      serviceTypesList: [],

      datas: [],
      tables: [],
      notNor: 0, //第一次不发生变化
      isLoad: false,
    };
  },
  created () {
    let $this = this
    $this.bulidSelect();
    this.getDicts("item_apply_store_type").then(response => {
      this.serviceTypesList = response.data;
    });
    const cardId = $this.$route.params && $this.$route.params.cardId;

    if (cardId) {
      getCard(cardId).then(response => {
        $this.form = response.data
        console.log($this.form)
        $this.selectedDataStore = response.data.releaseList || []
        $this.selectedDataDevice = response.data.itemVoList || []
        $this.displayBool = 1;
        this.$set(this.form, 'checkList', [])
        this.$set(this.form, 'checkListPay', [])
        this.$set(this.form, 'serviceTypes', [])
        this.$set(this.form, 'itemTagsArrayYx', [])
        if(this.form.marketingTags !="" && this.form.marketingTags!=null){
          this.form.itemTagsArrayYx = this.form.marketingTags.split(",")
        }

        if (this.form.isCommon == '0') {
          this.form.checkList.push('isCommon');
        }
        if (this.form.isSubgift == '1') {
          this.form.checkList.push('isSubgift');
        }
        if (this.form.isShow == '1') {
          this.form.checkList.push('isShow');
        }
        if (this.form.isRecommend == '1') {
          this.form.checkList.push('isRecommend');
        }

        if (this.form.isUseCoupon == '1') {
          this.form.checkListPay.push('isUseCoupon');
        }
        if (this.form.isUseMemberDiscount == '1') {
          this.form.checkListPay.push('isUseMemberDiscount');
        }
        if (this.form.isUseBoluoGoldCoin == '1') {
          this.form.checkListPay.push('isUseBoluoGoldCoin');
        }
        if (this.form.isUseBoluoSilverCoin == '1') {
          this.form.checkListPay.push('isUseBoluoSilverCoin');
        }

        if (this.form.applyStoreType) {
          this.form.serviceTypes = this.form.applyStoreType.split(",")
        }
        this.isLoad = true;
        this.itemTypeStr.push(this.form.cardType)
      });
    } else {
      this.isLoad = true;
    }


  },

  methods: {
    checkPermi,
    checkRole,
    //复选框选中方法

    choiceCheckboxStroe (value) {
      if (!value) {
        this.selectedDataStore = []
      }
    },
    choiceCheckboxMember (value) {
      if (!value) {
        this.form.memberLevel = null;
      }
    },
    existValue (type) {
      let index = 0;
      this.form.checkList.forEach(elemet => {
        if (elemet == type) {
          index++;
        }
      })
      return index;
    },
    existValuePay (type) {
      let index = 0;
      this.form.checkListPay.forEach(elemet => {
        if (elemet == type) {
          index++;
        }
      })
      return index;
    },
    selectCommodityDevice () {
      if (!this.form.cardType) {
        this.$message.error("请先选择类别");
        return
      }
      this.$forceUpdate()
      this.deviceOpen = true;
      this.$nextTick(() => {
        this.$refs["selTableDevice"].greet(this.selectedDataDevice);
      });
    },
    selectCommodity () {
      if (!this.form.cardType) {
        this.$message.error("请先选择类别");
        return
      }
      this.$forceUpdate()
      this.storeOpen = true;
      this.$nextTick(() => {
        this.$refs["selTable"].greet(this.selectedDataStore);
      });
    },
    multipleSelectionDevice (data) {
      this.deviceOpen = false

      if (data.length > 0) {
        data.forEach(vo => {
          // vo.itemSettlementPriceStr = 0.01
          let index = -1, addIdx = -1
          this.selectedDataDevice.forEach((element, ind) => {

            if (element.itemId != vo.itemId) {
              index++
            } else {
              if (vo.haveSku == '1') {
                addIdx = ind
              }
            }
          });
          if (index + 1 == this.selectedDataDevice.length) {
            this.selectedDataDevice.push(vo)
          }
          if (addIdx != -1) {
            this.selectedDataDevice.splice(addIdx + 1, 0, vo)
          }
        })
      }

      // this.selectedDataDevice = data;
      this.$nextTick(() => {
        this.$refs.childDevice.getList();
      });
    },
    multipleSelection (data) {
      this.storeOpen = false
      this.selectedDataStore = data;
      this.$nextTick(() => {
        this.$refs.childStore.getList();
      });
    },
    toCloseDeviceBox () {
      this.deviceOpen = false;
    },
    toCloseBox () {
      this.storeOpen = false;
    },
    indexMethod (index) {
      this.indexs = index
      return index * 1;
    },
    handleDelete (row, index) {
      console.log(index)
      if (row.skuId) {
        delSku(row.skuId).then(response => {
          this.form.proboxServiceItemSkus.splice(index, 1);

        })
      } else {
        this.form.proboxServiceItemSkus.splice(index, 1);

      }
    },
    handleAdd () {
      let data = {
        no: JSON.parse(JSON.stringify(this.indexs)),
        skuId: null,
        skuName: null,
        serviceItemId: null,
        cardPrice: 0,
        cardFavorablePrice: 0,
        cardSettlementPrice: 0,
        cardBoluoHuaPrice: 0,
        cardServiceDuration: 0,
        serviceTimes: 1,
      }
      this.form.proboxServiceItemSkus.push(data);
      console.log(this.form.proboxServiceItemSkus)
    },


    oninput (num, limit) {

      var str = num
      var len1 = str.substr(0, 1)
      var len2 = str.substr(1, 1)
      if (str.length > 1 && len1 == 0 && len2 != ".") {
        str = str.substr(1, 1)
      }
      if (len1 == ".") {
        str = ""
      }
      if (str.indexOf(".") != -1) {
        var str_ = str.substr(str.indexOf(".") + 1)
        if (str_.indexOf(".") != -1) {
          str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
        }
      }
      //正则替换
      str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
      if (limit / 1 === 1) {
        str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/, '$1') // 小数点后只能输 1 位
      } else {
        str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1') // 小数点后只能输 2 位
        if (str.indexOf(".") == str.length - 1) {
          str = str.substring(0, str.length - 1);
        }
      }
      return str
    },
    oninputs (num, limit) {

      var str = num
      var len1 = str.substr(0, 1)
      var len2 = str.substr(1, 1)
      if (str.length > 1 && len1 == 0 && len2 != ".") {
        str = str.substr(1, 1)
      }
      if (len1 == ".") {
        str = ""
      }
      if (str.indexOf(".") != -1) {
        var str_ = str.substr(str.indexOf(".") + 1)
        if (str_.indexOf(".") != -1) {
          str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
        }
      }
      //正则替换
      str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
      if (limit / 1 === 1) {
        str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/, '$1') // 小数点后只能输 1 位
      } else {
        str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1') // 小数点后只能输 2 位

      }
      return str
    },
    // 表单重置
    reset () {
      this.form = {};
      this.resetForm("form");
    },
    divShow (obj) {
      this.displayBool = obj;
    },
    /**各种下拉框 */
    bulidSelect () {
      // 分类
      selectOptions().then(response => {
        this.categoryOptions = response.data;
      });
      this.getDicts("proBoxService_itemType").then(response => {
        this.cardTypeOptions = response.data;
      });
      getPayLevel().then(response => {
        this.levelOptions = response;
      })
    },
    choiceServiceCheckbox (value) {
      this.selectedDataStore = []
      // this.selectedDataDevice = [];

    },
    disabledType (value) {
      /*
      if (this.form.cardType == 'probxplus' || value == 'probxplus') {
        return false;
      }
      if (value != this.form.cardType) {
        return true;
      }*/
      return false
    },
    cardTypeChange (value) {
      this.selectedDataStore = [];
      this.selectedDataDevice = [];
      this.serviceTypes = []
      this.form.serviceTypes.push(value);

      // this.itemTypeStr = []
      // this.itemTypeStr.push(value)

    },

    /** 提交按钮 */
    submitForm (status) {

      this.$refs.child.selectImg();
      this.$refs.childss.selectImg();
      this.$refs.childsss.selectImg();
      this.$refs.childsssBackgroundImage.selectImg();

      if (this.form.cardMainImage == null || this.form.cardMainImage == "") {
        this.$message.error("请上传一张套餐卡主图");
        return;
      }
      if (this.form.cardBanner == null || this.form.cardBanner == "") {
        this.$message.error("请上传一张banner图片");
        return;
      }
      if (this.selectedDataDevice.length == 0) {
        this.$message.error("请选择一个服务项目");
        return;
      }

      if (this.form.expireDayRadio == 0) {
        if (!this.form.expireDay) {
          this.$message.error("请选择有效天数!");
          return;
        }
        this.form.expireDate = null

      } else if (this.form.expireDayRadio == 2) {
        if (!this.form.expireDate) {
          this.$message.error("请选择指定时间!");
          return;
        }
      } else if (this.form.expireDayRadio == -1) {
        this.form.expireDate = null


      }

      this.$refs["form"].validate(valid => {

        if (valid) {
          let qf = [];
          this.selectedDataStore.forEach(vo => {
            qf.push(vo.storeUid);
          })

          //服务类别
          if (this.form.serviceTypes) {
            let s = ""
            this.form.serviceTypes.forEach(str => {
              s += "," + str;
            })
            this.form.applyStoreType = s.substring(1);
          }
          if (this.form.itemTagsArrayYx) {
            let s = ""
            this.form.itemTagsArrayYx.forEach(str => {
              s += "," + str;
            })
            this.form.marketingTags = s.substring(1);
          }

          // let qfDevice = [];
          // this.selectedDataDevice.forEach(vo => {
          //   qfDevice.push(vo.deviceId);
          // })
          //this.form.deviceIdS = qfDevice;
          this.form.shopListIds = qf;
          //this.form.itemVoList = this.selectedDataDevice;
          const cardId = this.$route.params && this.$route.params.cardId;
          this.form.itemVoList = []
          this.form.cardId = cardId;
          let ind = 0;
          let index = 0
          this.selectedDataDevice.forEach(vo => {
            vo.itemPriceView = vo.itemPriceStr || 0
            vo.itemFavorablePriceView = vo.itemFavorablePriceStr || 0
            vo.itemSettlementPriceView = vo.itemSettlementPriceStr || 0
            this.form.itemVoList.push(vo);
            if (vo.itemFavorablePriceView * 1 >= vo.itemPriceView * 1) {
              ind++
            }
            if (vo.itemSettlementPriceView * 1 > vo.itemFavorablePriceView * 1) {
              index++
            }
          })

          // if (ind > 0) {
          //   this.$message.error('面价要大于活动价格');
          //   return;
          // }
          // if (index > 0) {
          //   this.$message.error('活动价格要大于等于结算价格');
          //   return;

          // }

          this.form.cardPriceView = this.form.cardPriceStr
          this.form.cardFavorablePriceView = this.form.cardFavorablePriceStr
          this.form.cardSettlementPriceView = this.form.cardSettlementPriceStr
          this.form.cardBoluoHuaPriceView = this.form.cardBoluoHuaPriceStr
          this.form.auditStatus = status;

          //多选框赋值
          if (this.form.checkList.length > 0) {
            if (this.handleCheckbox() > 0) {
              return;
            }
          } else {
            this.form.isCommon = '1'
            this.form.isRecommend = '0'
            this.form.isSubgift = '0'
          }
          if (this.form.checkListPay.length > 0) {
            if (this.handleCheckboxPay() > 0) {
              return;
            }
          } else {
            this.form.isUseBoluoGoldCoin = '0'
            this.form.isUseBoluoSilverCoin = '0'
            this.form.isUseMemberDiscount = '0'
            this.form.isUseCoupon = '0'
            this.form.memberLevel = null;
          }
          if (cardId) {


            editCard(this.form).then(respone => {
              this.msgSuccess("修改成功");
              this.colsePro();
            })
          } else {
            addCard(this.form).then(respone => {
              this.msgSuccess("添加成功");
              this.colsePro();
            })
          }
        }
      });
    },
    colsePro () {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/product/card",
        query: {
          t: Date.now()
        }
      });
    },
    handleClose (tag) {
      this.form.cardTagsArray.splice(this.form.cardTagsArray.indexOf(tag), 1);
    },
    handleCloseYx (tag) {
      this.form.itemTagsArrayYx.splice(this.form.itemTagsArrayYx.indexOf(tag), 1);
    },
    showInput () {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    showInputYx () {
      this.inputVisibleYx = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInputYx.$refs.input.focus();
      });
    },
    handleInputConfirm () {
      let inputValue = this.inputValue;
      //判断是否已经存在
      console.log(this.form.cardTagsArray)
      if (this.form.cardTagsArray.indexOf(inputValue) > -1) {
        this.$message.error("标签重复！重新输入");
      } else {
        if (inputValue) {
          this.form.cardTagsArray.push(inputValue);
        }
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
  handleInputConfirmYx () {
      let inputValue = this.inputValueYx;
      //判断是否已经存在
      if (this.form.itemTagsArrayYx.indexOf(inputValue) > -1) {
        this.$message.error("标签重复！重新输入");
      } else {
        if (inputValue) {
          this.form.itemTagsArrayYx.push(inputValue);
        }
      }
      this.inputVisibleYx = false;
      this.inputValueYx = '';
    },
    handleCheckbox () {
      console.log(this.form.checkList)
      if (this.form.checkList.includes('isCommon')) {
        this.form.isCommon = '0'
      } else {
        this.form.isCommon = '1'
      }
      if (this.form.checkList.includes('isRecommend')) {
        this.form.isRecommend = '1'
      } else {
        this.form.isRecommend = '0'
      }
      if (this.form.checkList.includes('isSubgift')) {
        this.form.isSubgift = '1'
      } else {
        this.form.isSubgift = '0'
      }
      if (this.form.checkList.includes('isShow')) {
        this.form.isShow = '1'
      } else {
        this.form.isShow = '0'
      }
      if (this.form.isCommon == '0') {
        if (this.selectedDataStore.length == 0) {
          this.$message.error("请选择一个门店");
          return 1;
        }
      }
    }, handleCheckboxPay () {

      if (this.form.checkListPay.includes('isUseBoluoGoldCoin')) {
        this.form.isUseBoluoGoldCoin = '1'
      } else {
        this.form.isUseBoluoGoldCoin = '0'
      }
      if (this.form.checkListPay.includes('isUseBoluoSilverCoin')) {
        this.form.isUseBoluoSilverCoin = '1'
      } else {
        this.form.isUseBoluoSilverCoin = '0'
      }

      if (this.form.checkListPay.includes('isUseMemberDiscount')) {
        this.form.isUseMemberDiscount = '1'
      } else {
        this.form.isUseMemberDiscount = '0'
        this.form.memberLevel = null;
      }
      if (this.form.checkListPay.includes('isUseCoupon')) {
        this.form.isUseCoupon = '1'
      } else {
        this.form.isUseCoupon = '0'
      }

      if (this.form.isUseMemberDiscount == '1') {
        if (!this.form.memberLevel) {
          this.$message.error("请选择一个折扣等级");
          return 1;
        }
      }
      //return 0;
    },
  }
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 50%;
}

#photo {
  float: left;
  width: 70%;
}

#content {
  float: right;
  width: 30%;
}

.product-header {
  position: absolute;
  top: 0;
  width: 600px;
  padding: 18px;
  background-color: #fff;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 40px;
}

.product-div {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 50px;
}

.product-div-two {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 60px;
}

.product-div-three {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 100px;
}

.place-font {
  color: #999;
  font-size: 13px;
  position: relative;
}

.dw {
  border: 1px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 200;
  padding-left: 120px;
  background-color: #fff;
  border-top: 1px solid #eee;
  width: 100%;
  height: 55px;
}

.div-img {
  display: none;
}

.div-text {
  margin: 22px 0px 12px 120px;
  color: #2656bd;
  cursor: pointer;
  font-size: 13px;
}

.div-append {
  line-height: 34px;
  font-size: 14px;
  color: #606266;
  margin-left: -50%;
}

.div-appendHide {
  line-height: 34px;
  font-size: 14px;
  color: #606266;
  margin-left: -50%;
  visibility: hidden;
}
</style >
